<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="120px"
    >
      <el-form-item label="设备编号" prop="code">
        {{ formData.code }}
      </el-form-item>
      <el-form-item label="电价类型" prop="electricPriceType">
        <el-radio-group v-model="formData.electricPriceType">
          <el-radio :label="false">单费率</el-radio>
          <el-radio :label="true">复费率</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="保电状态" prop="">
        <el-radio-group v-model="formData.electrictStatus">
          <el-radio :label="0">保电</el-radio>
          <el-radio :label="1">不保电</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="电价方案" prop="plmChargeTemplateId">
        <el-input v-model.number="formData.plmChargeTemplateId" placeholder="请选择电价方案" :readonly="true">
            <template #append>
              <el-button type="success" @click="openHxnyPlmChargeTpl">选择</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="透支金额" prop="overdraftAmount">
        <el-input v-model.number="formData.overdraftAmount" placeholder="请输入透支金额">
            <template #append>
              <el-button type="success">元</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="负荷限制功率" prop="loadLimitPower">
        <el-input v-model.number="formData.loadLimitPower" placeholder="请输入负荷限制功率" >
            <template #append>
              <el-button type="success">kW（单相 22.0，三相 XX）</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="超负荷延时间" prop="loadDelayTime">
        <el-input v-model.number="formData.loadDelayTime" placeholder="请输入超负荷延时间" >
            <template #append>
              <el-button type="success">秒（单相 10，三相 XX）</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="电流互感器变比" prop="currentTransformerRatio">
        <el-input v-model.number="formData.currentTransformerRatio" placeholder="请输入电流互感器变比" >
            <template #append>
              <el-button type="success">（单相 1，三相 XX）</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="电压互感器变比" prop="voltageTransformerRatio">
        <el-input v-model.number="formData.voltageTransformerRatio" placeholder="请输入电压互感器变比" >
            <template #append>
              <el-button type="success">（单相 1，三相 XX）</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="一级报警金额" prop="oneLevelAmount">
        <el-input v-model.number="formData.oneLevelAmount" placeholder="请输入一级报警金额" >
            <template #append>
              <el-button type="success">元</el-button>
            </template>
        </el-input>
      </el-form-item>
      <el-form-item label="二级报警金额" prop="twoLevelAmount">
        <el-input v-model.number="formData.twoLevelAmount" placeholder="请输入二级报警金额" >
            <template #append>
              <el-button type="success">元</el-button>
            </template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
  <HxnyPlmChargeTpl ref="hxnyPlmChargeTplRef"  @confirm-hxny-plm-charge-tpl="confirmHxnyPlmChargeTpl" />
</template>
<script lang="ts" setup>
import * as MeterApi from '@/api/zwsj/meter'
import HxnyPlmChargeTpl from '@/views/zwsj/common/HxnyPlmChargeTpl.vue' 

defineOptions({ name: 'HxnyMeterParam' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  meterId: undefined,
  code: undefined,
  electricPriceType: undefined,
  electrictStatus: undefined,
  overdraftAmount: undefined,
  loadLimitPower: undefined,
  loadDelayTime: undefined,
  currentTransformerRatio: undefined,
  voltageTransformerRatio: undefined,
  plmChargeTemplateId: undefined,
  oneLevelAmount: undefined,
  twoLevelAmount: undefined,
  zoneId: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '弘新能源-电表参数下发'
  resetForm()

  if (id) {
    formLoading.value = true
    try {
      let data = await MeterApi.getHxnyMeterDownParam(id)
      formData.value = data
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as MeterApi.MeterParamVo
      await MeterApi.updateHxnyMeterDownParam(data)
      message.success(t('common.updateSuccess'))
      dialogVisible.value = false
      // 发送操作成功的事件
      emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    meterId: undefined,
    code: undefined,
    electricPriceType: undefined,
    electrictStatus: undefined,
    overdraftAmount: undefined,
    loadLimitPower: undefined,
    loadDelayTime: undefined,
    currentTransformerRatio: undefined,
    voltageTransformerRatio: undefined,
    plmChargeTemplateId: undefined,
    oneLevelAmount: undefined,
    twoLevelAmount: undefined,
    zoneId: undefined,
  }
  formRef.value?.resetFields()
}
// 选择电价方案
const hxnyPlmChargeTplRef = ref()
const openHxnyPlmChargeTpl = async () => {
  hxnyPlmChargeTplRef.value.open()
}

const confirmHxnyPlmChargeTpl = async (tpl: any) => {
  formData.value.plmChargeTemplateId = tpl.id
}

</script>
